<template>
    <div class="aboutBox" v-loading="loading">
        <div class="about">
            <div class="left">
                <el-row :gutter="24">
                    <!-- <el-col :span="12">
            <el-card shadow="always" class="box-card">
              <div class="name">客户</div>
              <el-button type="success" round>添加客户</el-button>
              <el-button type="success" round>添加拜访记录</el-button>
              <el-button type="primary" round>添加报表</el-button>
              <el-button type="primary" round>我是按钮</el-button>
            </el-card>
  
          </el-col> -->
                    <el-col :span="12">
                        <el-card shadow="always" class="box-card" style="padding: 90px 0 90px 0; ">
                            <div>
                                <el-statistic :title="ban.name">
                                    <template slot="formatter"> {{ ban.value }}件 </template>
                                </el-statistic>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="always">
                            <div style="text-align: left;padding: 20px 0 30px 0;">{{ this.mingcheng }}专利状态</div>
                            <div class="ban3Box">
                                <div v-for="(item, index) in ban3" :key="index" style="margin: 20px  30px ;">
                                    <el-statistic :title="item.name">
                                        <template slot="formatter"> {{ item.value }}件 </template>
                                    </el-statistic>
                                </div>
                            </div>

                        </el-card>
                    </el-col>

                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-card shadow="always">
                            <div class="echart" id="mychart" :style="myChartStyle"></div>

                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="always">

                            <div id="pieChart" :style="myChartStyle"></div>

                        </el-card>
                    </el-col>
                </el-row>


                <el-row :gutter="24">
                    <!-- <el-col :span="12">
                        <el-card shadow="always">
                            <div class="echart" id="shadowChart1" :style="myChartStyle"></div>

                        </el-card>
                    </el-col> -->
                    <!-- <el-col :span="12">
                        <el-card shadow="always">

                            <div class="echart" id="shadowChart2" :style="myChartStyle"></div>

                        </el-card>
                    </el-col> -->
                </el-row>



            </div>
            <div class="right">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-card shadow="always">
                            <div class="right_top">
                                <img :src="this.picurl" alt="">
                            </div>
                            <div class="br"></div>
                            <div style="text-align: left;">
                                <span style="font-size: 18px;">常用链接</span>
                                <ul>
                                    <li><a :href="this.linkurl" target="_blank">{{ this.userInfo.danwei }}</a> </li>
                                    <!-- <li>首都医科大学</li> -->
                                    <li><a href="https://cponline.cnipa.gov.cn/" target="_blank">国家知识产权局</a></li>
                                </ul>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-card shadow="always">
                            <div style="text-align:left; color: #000; fontWeight: bold;fontSize: 14px ">
                                {{ this.mingcheng }}发明人词云
                            </div>
                            <JWordCloud :word="word"></JWordCloud>
                        </el-card>
                    </el-col>
                </el-row>



            </div>


        </div>
        <div class="bottom">
            <div style="width: 45%;">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-card shadow="always">
                            <div class="echart" id="shadowChart1" :style="myChartStyle"></div>

                        </el-card>
                    </el-col>

                </el-row>
            </div>


            <div style="width: 53%;">

                <el-row :gutter="20">
                    <el-card shadow="always" style="padding: 110px 0 110px 0; ">
                        <el-col :span="6" v-for="(item, index) in ban4" :key="index">

                            <div style=" width: 100px; line-height: 60px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;"
                                @click="statistics(item.name)">
                                <el-statistic :title="item.name">
                                    <template slot="formatter"> {{ item.value }}件 </template>
                                </el-statistic>
                            </div>

                        </el-col>

                    </el-card>

                </el-row>
            </div>

        </div>


        <!-- 查看详情 -->
        <el-dialog :span="24" :visible.sync="rowVisible" title="" width="70%">
            <el-table :data="rowTableData" border style="width: 100%" height="450" align="center">
                <!-- <el-table-column type="index" width="50" center>
        </el-table-column> -->
                <el-table-column fixed prop="gk_gg_h" label="公开公告号" width="180">
                </el-table-column>
                <el-table-column prop="zlsqh" label="专利申请号" width="180">
                </el-table-column>
                <el-table-column prop="zlmc" label="专利名称" width="180">
                </el-table-column>
                <el-table-column prop="zlfyzl" label="专利费用种类" width="180">
                </el-table-column>
                <el-table-column prop="famingren" label="发明人" width="180">
                </el-table-column>
                <el-table-column prop="gfjx" align="left" label="缴费截止日" width="180">
                </el-table-column>

                <el-table-column prop="yjje" label="应缴金额" width="120">
                </el-table-column>
                <el-table-column prop="znje" label="滞纳金额" width="120">
                </el-table-column>
                <el-table-column prop="nfzje" label="总金额" width="180">
                </el-table-column>
            </el-table>

            <div style="text-align: right; margin-top: 20px;">

                <el-pagination @size-change="jfSizeChange" @current-change="jfCurrentChange"
                    :current-page="jfCurrentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="jfSize"
                    layout="total, prev, pager, next, sizes" :total="jfTotal">
                </el-pagination>
            </div>

        </el-dialog>

        <!-- 条形图详情 -->
        <el-dialog :span="24" :visible.sync="barTypeShow" title="" width="60%">
            <el-table :data="barTableData" border style="width: 100%" height="450" align="center">
                <el-table-column fixed prop="gk_gg_h" label="公开公告号" width="180">
                </el-table-column>
                <el-table-column prop="zlsqh" label="专利申请号" width="180">
                </el-table-column>
                <el-table-column prop="bt_zw_" label="专利名称" width="180">
                </el-table-column>
                <el-table-column prop="famingren" label="发明人" width="180">
                </el-table-column>
                <el-table-column prop="shenqingri" label="申请日" width="180">
                </el-table-column>
                <el-table-column prop="fenji" label="分级" width="180">
                </el-table-column>
            </el-table>
            <div style="text-align: right; margin-top: 20px;">
                <el-pagination @size-change="barSizeChange" @current-change="barCurrentChange"
                    :current-page="barCurrentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="barSize"
                    layout="total, prev, pager, next, sizes" :total="barTotal">
                </el-pagination>

            </div>
        </el-dialog>
    </div>
</template>
<script>
import * as echarts from "echarts";
import JWordCloud from '@/components/JWordCloud.vue'
import Cookies from "js-cookie";
export default {
    components: {
        JWordCloud
    },
    data() {
        return {
            mingcheng: '',
            picurl: '',
            linkurl: '',
            userInfo: {},
            myChart: {},
            myChartStyle: { float: "left", width: "100%", height: "300px", }, //图表样式
            tableData: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            categories: ["A", "B", "C", "D", "E"],
            colors: ['#6ab7f4', '#56bab0', '#ffbb56', '#e67a7a', '#9a7cd0'],
            barSeries: [],
            ban: {},
            ban2: {},
            ban3: {},
            ban4: [],
            word: [
                // { name: "单词", freq: 10 },
                // { name: "单词1", freq: 5 },
                // { name: "单词2", freq: 7 },
                // { name: "单词3", freq: 2 },
                // { name: "单词5", freq: 3 },
                // { name: "单词6", freq: 4 },
                // { name: "单词7", freq: 5 },
                // { name: "单词8", freq: 6 },
                // { name: "单词9", freq: 6 },
                // { name: "单词10", freq: 8 },
                // { name: "单词11", freq: 4 },
                // { name: "单词12", freq: 2 },
                // { name: "单词13", freq: 4 },
                // { name: "单词14", freq: 3 },
                // { name: "单词15", freq: 1 },
                // { name: "单词16", freq: 5 }
            ],
            loading: false,

            rowVisible: false,
            rowTableData: [],
            barTypeShow: false,
            barTableData: [],

            jfName: '',
            jfSize: 20,
            jfCurrentPage: 1,
            jfTotal: 0,

            fenjiName: '',
            barSize: 20,
            barCurrentPage: 1,
            barTotal: 0,
        }
    },
    created() {

    },
    mounted() {
        this.getCookie()
        this.report()
        // this.getReport()
    },
    methods: {
        getCookie() {
            this.userInfo = JSON.parse(Cookies.get("userInfo"));
            if (this.userInfo.danwei == '首都医科大学附属北京安贞医院') {
                this.linkurl = 'https://www.anzhen.org/'
                this.mingcheng = '北京安贞医院'
                this.picurl = require('@/assets/azyy.png')
            } else if (this.userInfo.danwei == '首都医科大学附属北京儿童医院') {
                this.linkurl = 'https://www.bch.com.cn/'
                this.mingcheng = '儿童医院'
                this.picurl = require('@/assets/client.png')
            } else if (this.userInfo.danwei == '中日友好医院') {
                this.mingcheng = '中日友好医院'
                this.linkurl = 'https://www.zryhyy.com.cn/'
                this.picurl = require('@/assets/zryh.png')
            } else if (this.userInfo.danwei == '北京大学第一医院') {
                this.mingcheng = '北京大学第一医院'
                this.picurl = require('@/assets/bddy.jpg')
                this.linkurl = 'https://www.pkufh.com/'
            }

        },
        //柱状图
        initEcharts() {
            var that = this
            const option = {
                title: {
                    text: '专利分级',
                    top: "3%",
                    left: "2%",
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                },
                color: this.colors,
                legend: {
                    orient: "horizontal",
                    top: "3%",
                    x: "20%",
                    y: "center",
                    itemWidth: 10,
                    itemHeight: 10,
                    data: this.categories,
                    textStyle: {
                        fontSize: 10,//字体大小
                        color: '#a9a9a9'//字体颜色
                    }
                },

                grid: {
                    top: '15%',
                    left: '0%',
                    right: '0%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        // textStyle: {
                        //   fontSize: 10,//字体大小
                        //   color: '#a9a9a9'
                        // },
                        alignWithLabel: true
                    },
                    data: this.categories
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#a9a9a9'
                        }
                    }
                },

                series: this.barSeries
            }

            const myChart = echarts.init(document.getElementById("mychart"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            myChart.on('click', function (params) {
                that.fenjiName = params.name
                that.barCurrentPage = 1
                that.getStatistics(params.name)
            })
        },

        //饼图
        getOption() {
            const pieOption = {
                title: {
                    text: '专利类型概况',
                    top: "3%",
                    left: "2%",
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // legend: {
                //   orient: 'vertical',
                //   left: 10,
                //   data: ['数据1', '数据2', '数据3', '数据4', '数据5']
                // },
                series: [
                    {
                        name: '',//饼图名称
                        type: 'pie',
                        radius: ['40%', '60%'],
                        textStyle: {
                            color: "#999",
                            fontSize: "12px"
                        },
                        // avoidLabelOverlap: false,
                        // label: {
                        //   show: false,
                        //   position: 'center'
                        // },
                        emphasis: {

                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            formatter(param) {
                                // correct the percentage
                                return param.name + ' (' + param.percent + '%)';
                            }
                        },
                        // labelLine: {
                        //   show: false
                        // },
                        // data: [
                        //   { value: 886, name: '发明授权' },
                        //   { value: 2425, name: '发明申请' },
                        //   { value: 118, name: '外观设计' },
                        //   { value: 4223, name: '实用新型' }
                        // ]
                        data: this.pieSeries
                    }
                ]
            }
            const pieChart = echarts.init(document.getElementById("pieChart"));
            pieChart.setOption(pieOption);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                pieChart.resize();
            });

        },

        getOptionTwo() {
            const pieOption = {
                title: {
                    text: '全国儿童医院专利类型',
                    top: "3%",
                    left: "2%",
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // legend: {
                //   orient: 'vertical',
                //   left: 10,
                //   data: ['数据1', '数据2', '数据3', '数据4', '数据5']
                // },
                series: [
                    {
                        name: '',//饼图名称
                        type: 'pie',
                        // radius: ['50%', '70%'],
                        radius: ['40%', '60%'],
                        textStyle: {
                            color: "#999",
                            fontSize: "12px"
                        },
                        // avoidLabelOverlap: false,
                        // label: {
                        //   show: false,
                        //   position: 'center'
                        // },
                        emphasis: {

                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            formatter(param) {
                                // correct the percentage
                                return param.name + ' (' + param.percent + '%)';
                            }
                        },
                        // labelLine: {
                        //   show: false
                        // },
                        // data: [
                        //   { value: 886, name: '发明授权' },
                        //   { value: 2425, name: '发明申请' },
                        //   { value: 118, name: '外观设计' },
                        //   { value: 4223, name: '实用新型' }
                        // ]
                        data: this.pieSeriesTwo
                    }
                ]
            }
            const pieChart = echarts.init(document.getElementById("pieChart2"));
            pieChart.setOption(pieOption);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                pieChart.resize();
            });

        },

        //条形图
        shadow() {
            let option = {
                title: {
                    text: this.mingcheng + '专利申请趋势',
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {//X轴的设置
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: this.Bar2.yAxis
                },//Y轴的设置
                series: [//数据的设置
                    {
                        name: '',
                        type: 'bar',//设置为柱状图
                        data: this.Bar2.series
                    }
                ]
            }
            const myChart = echarts.init(document.getElementById("shadowChart1"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });


        },

        shadowTwo() {
            let option = {
                title: {
                    text: '全国儿童医院专利申请趋势',
                    textStyle: {
                        color: '#000',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {//X轴的设置
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: this.Bar3.yAxis
                },//Y轴的设置
                series: [//数据的设置
                    {
                        name: '',
                        type: 'bar',//设置为柱状图
                        data: this.Bar3.series
                    }
                ]
            }
            const myChart = echarts.init(document.getElementById("shadowChart2"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });


        },

        //第一列合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % this.pageSize === 0) {
                    return {
                        rowspan: this.pageSize,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },



        //
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getReport()
        },
        handleCurrentChange(val) {

            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getReport()
        },

        //
        getReport() {
            var param = {
                "pageSize": this.pageSize,
                "pageIndex": this.currentPage,
            }
            this.$apiFun.getReport(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.rows
            })

        },


        //report柱状图、饼图
        report() {
            this.loading = true
            var param = {
                "danwei": this.userInfo.danwei
            }
            this.$apiFun.report(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                this.categories = res.data.Bar1.categories
                this.colors = res.data.Bar1.colors
                this.barSeries = res.data.Bar1.series
                this.pieSeries = res.data.Pie1.series
                this.ban = res.data.Ban1.series[0]
                this.ban2 = res.data.Ban1.series[0]
                this.ban3 = res.data.Ban2.series
                this.ban4 = res.data.Ban3.series
                // this.pieSeriesTwo = res.data.Pie1.series
                this.word = res.data.Cy1.series
                this.Bar2 = res.data.Bar2
                this.Bar3 = res.data.Bar2

                this.initEcharts()
                this.getOption()
                this.shadow()
                setTimeout(() => {
                    this.loading = false;
                }, 200);
            })
        },


        //统计图
        statistics(name) {
            this.jfName = name
            this.jfCurrentPage = 1
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "6507fc1af74c7a63ac517a0b",
                "viewId": "6507fc1af74c7a63ac517a0c",
                "pageSize": this.jfSize,
                "pageIndex": this.jfCurrentPage,
                "listType": 0,
                "sortId": "",
                "isAsc": "",
                "filters": [
                    {
                        "controlId": "zlnfzt",
                        "dataType": 11,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": name//ban4.name
                    },
                    {
                        "controlId": "ssdw",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 2,
                        "value": this.userInfo.danwei//登录账号所属单位
                    }
                ]
            }
            this.$apiFun.getStatistics(param).then((res) => {
                this.rowVisible = true
                console.log(res)
                this.rowTableData = res.data.rows
                this.jfTotal = res.data.total
            })


        },

        jfSizeChange(val) {
            this.jfSize = val
            this.statistics(this.jfName)
        },
        jfCurrentChange(val) {

            console.log(`当前页: ${val}`);
            this.jfCurrentPage = val
            this.statistics(this.jfName)
        },


        getStatistics(name) {
            var that = this
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "64dc89d71777cd57b6e251de",
                "viewId": "64dc89d71777cd57b6e251df",
                "pageSize": that.barSize,
                "pageIndex": that.barCurrentPage,
                "listType": 0,
                "sortId": "",
                "isAsc": "",
                "filters": [
                    {
                        "controlId": "ssdw",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.userInfo.danwei//登录账号所属单位
                    },
                    {
                        "controlId": "fenji",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": name
                    }
                ]
            }
            that.$apiFun.getStatistics(param).then((res) => {
                that.barTypeShow = true
                console.log(res)
                that.barTableData = res.data.rows
                that.barTotal = res.data.total
            })
        },

        barSizeChange(val) {
            this.barSize = val
            this.getStatistics(this.fenjiName)
        },
        barCurrentChange(val) {

            console.log(`当前页: ${val}`);
            this.barCurrentPage = val
            this.getStatistics(this.fenjiName)
        },
    }
}
</script>
<style lang="scss" scoped>
.about {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
        width: 65%;

        .ban3Box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px 0 26px;
        }
    }

    .right {
        width: 34%;

        .right_top {
            text-align: left;

            img {
                width: 160px;
                height: 100px;
            }

        }

        .br {
            width: 100%;
            height: 3px;
            background-color: #eaedf1;
            margin: 20px 0;
        }

        ul {
            li {
                line-height: 48px;
                cursor: pointer;

                a {
                    color: #333;
                    text-decoration: none;
                }
            }

            li:hover {
                color: #5470c6;

                a {
                    color: #5470c6;
                    text-decoration: none;
                }
            }
        }
    }



}

.bottom {
    width: 100%;

    // line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-row {
    margin-bottom: 20px;

}

.box-card {
    height: 140px;
    line-height: 40px;
}

.name {
    // line-height: 40px;
}
</style>